<div
  class="browse-list-item"
  [title]="'Click to show playlist: ' + playlist.name"
  (click)="onPlaylistInfo($event, playlist)"
>
  <div class="flex items-center"><mat-icon>list</mat-icon></div>
  <div data-cy="playlist-name" class="flex-grow truncate">
    {{ playlist.name }}
  </div>
  <div class="text-muted" [title]="playlist.count + 'tracks in this playlist'">
    {{ playlist.count }}
  </div>
  <button
    mat-button
    title="Play this playlist"
    (click)="onPlayDir($event, playlist.name)"
  >
    <mat-icon> play_arrow</mat-icon>
  </button>
  <button
    (click)="onAddDir($event, playlist.name)"
    mat-button
    title="Add directory to the queue"
  >
    <mat-icon> add</mat-icon>
  </button>
</div>
